<template lang="pug">
.cp-course-view
  el-dialog(:title="title", :visible="visible", @close="close")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 课程名称 】
        span(v-text="detail.name")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 课程简介 】
        span(v-text="detail.desc")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 适合人群 】
        span(v-text="detail.suitCrowd")
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 课程分类 】
        span {{ detail.type | compare-list(crsTypeSelect) }}
      el-col(:span="12")
        strong 【 课程代号 】
        span {{ detail.code }}
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 课程形式 】
        span {{ detail.form | compare-list(crsFormSelect) }}
      el-col(:span="12")
        strong 【 课程编码 】
        span {{ detail.id }}
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 培训机构 】
        span {{ detail.agency | compare-list(agencySelect) }}
      el-col(:span="12")
        strong 【 培训到期时间 】
        span {{ detail.time | date-format }}
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 培训老师 】
        span {{ detail.teacher | compare-list(teacherSelect) }}
      el-col(:span="12")
        strong 【 所属计划 】
        span {{ detail.plan }}
    el-row(:gutter="20")
      el-col(:span="12")
        strong 【 培训时长 】
        span {{ detail.duration }}
      el-col(:span="12")
        strong 【 发布人 】
        span {{ detail.publisher }}
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'courseview',
  props: {
    title: {
      type: String,
      default: '查看课程详情'
    },
    visible: Boolean,
    detail: Object
  },
  data() {
    return {};
  },
  methods: {
    close () {
      this.$emit('close');
    }
  },
  computed: {
    ...mapGetters([
      'crsTypeSelect',
      'crsFormSelect',
      'agencySelect',
      'teacherSelect',
      'assignerSelect',
    ])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-course-view
  .el-col
    height: 28px
    line-height: 28px
  .el-row
    margin-bottom: 12px
    &:nth-child(odd)
      background: #f5f5f5
    &:nth-child(even)
      background: beige
  strong
    display: inline-block
    font-weight: 400
    margin-right: 8px
  // span
  //   white-space: normal;
  //   display: inline-flex;
</style>
